/*
 * @Author: luoqi
 * @Date: 2022-04-04 13:18:58
 * @LastEditors: luoqi
 * @LastEditTime: 2022-04-12 19:13:53
 * @Description: 
 */
import React,{ useState } from 'react';
import {  Button,Modal,Form, Input, Radio,Select,Upload, message,InputNumber } from 'antd';
import {  PlusOutlined, UploadOutlined } from '@ant-design/icons';
import axios from '../../utils/axios'
import qs from 'qs'
const { Option } = Select;


const Adduser = (props) => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [value, setValue] = React.useState(1);
  //上传图片
  const [imgUrl, setImgUrl] = useState()
 const [form1]=Form.useForm()
 
  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    form1.submit()
    
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };
  const onFinish = (values) => {
    console.log('Success:', values);
    let {age,nickname,phone,password,qrPassword,status,occupation}=values;
    console.log(imgUrl)
    if(password===qrPassword){
      axios({
      url:'/user/upsert',
      method:'post',
      data:qs.stringify({
        age:age,
        nickname,
        phone,
        password,
        occupation,
        status,
        headImg:imgUrl,
      })
    }).then(res=>{
      console.log(res);
      if (res.code == '200') {
        props.setNum(1);
        //清空表单
        form1.resetFields()
        //关闭
        setIsModalVisible(false);
      }
    })
    }else{
      message.error('前后密码不一致！');
    }
    
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  const onChange = e => {
    console.log('radio checked', e.target.value);
    setValue(e.target.value);
  };
  function handleChange(value) {
    console.log(`selected ${value}`);
  }
  //上传文件
  const props1 = {
    name: 'file',
    action: '/api/upload',
    onChange(info) {
      // console.log(info);
      if (info.file.status !== 'uploading') {
        // console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        console.log(info.file.response);
        let { fileName } = info.file.response
        setImgUrl(fileName)
        message.success(`${info.file.name} 上传成功`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 上传失败`);
      }
    },
  };
  return (
    <div>
            <Button type="success" icon={<PlusOutlined />} onClick={showModal}>
        添加
      </Button>
      <Modal title="添加用户" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} okText="确定"
            cancelText="取消">
        <Form
          name="basic1"
          form={form1}
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 16 }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
          initialValues={{status:1,occupation:'医生'}}
        >
          <Form.Item
            label="用户昵称"
            name="nickname"
            rules={[{ required: true, message: '请输入用户昵称' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="用户手机号"
            name="phone"
            rules={[{ required: true, message: '请输入正确的用户手机号' ,pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="用户密码"
            name="password"
          >
            <Input.Password />
          </Form.Item>
          <Form.Item
            label="确认用户密码"
            name="qrPassword"
          >
            <Input.Password />
          </Form.Item>
          <Form.Item
            label="用户年龄"
            name="age"
          >
            <InputNumber />
          </Form.Item>
          <Form.Item
            label="用户头像"
          >
            <Upload {...props1}>
              <Button icon={<UploadOutlined />}>上传用户头像</Button>
            </Upload>
          </Form.Item>
          <Form.Item
            label="选择用户职业"
            name="occupation"
          >
            <Select  style={{ width: 120 }} onChange={handleChange}>
              <Option value="医生">医生</Option>
              <Option value="学生">学生</Option>
              <Option value="家庭主妇">家庭主妇</Option>
              <Option value="其他">其他</Option>
            </Select>
          </Form.Item>
          <Form.Item
            label="用户状态"
            name="status"
          >
            <Radio.Group onChange={onChange} value={value} >
              <Radio value={1}>可用</Radio>
              <Radio value={0}>不可用</Radio>
            </Radio.Group>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}

export default Adduser;
